বুটস্ট্রাপ বেসিক ড্রপডাউন

বুটস্ট্রাপ ড্রপডাউন মেনু হলো একটি টোগল মেনু যেটি পূর্বনির্ধারিত লিষ্ট থেকে একটি ভ্যালু পছন্দ/সিলেক্ট করতে সাহায্য করে।

নিচের উদাহরণে একটি বেসিক ড্রপডাউন তৈরি করে দেখানো হলোঃ

kt_satt_skill_example_id=1100

উদাহরণের ব্যাখ্যা

.dropdown ক্লাসের মাধ্যমে ড্রপডাউন মেনুকে বুঝায়।

ড্রপডাউন মেনুকে অপেন করতে বাটন অথবা লিংক এর সাথে .dropdown-toggle ক্লাস এবং data-toggle="dropdown" এট্রিবিউট ব্যবহার করুন।

.caret ক্লাসের দ্বারা একটি ক্যারেট চিহ্ন তৈরি হয় (), যেটি দ্বারা বুঝা যায় যে এটি একটি ড্রপডাউন বাটন।

প্রকৃত ড্রপডাউন মেনু তৈরি করতে

এলিমেন্টে .dropdown-menu ক্লাস যুক্ত করুন।

---

বুটস্ট্রাপ ড্রপডাউন ডিভাইডার

ড্রপডাউন মেনুর মধ্যে লিংকগুলোকে আলাদা করার জন্য .divider ক্লাস ব্যবহার করা হয়ঃ

kt_satt_skill_example_id=1101

---

বুটস্ট্রাপ ড্রপডাউন হেডার

ড্রপডাউন মেনুর মধ্যে হেডার যুক্ত করার জন্য .dropdown-header ক্লাস ব্যবহার করুনঃ

kt_satt_skill_example_id=1102

---

বুটস্ট্রাপ ডিসেবল আইটেম

ড্রপডাউন মেনুর কোনো একটি আইটেমকে ডিসেবল করার জন্য .disabled ক্লাস ব্যবহার করুন।

---

বুটস্ট্রাপ ড্রপডাউনের অবস্থান নির্ধারণ

ড্রপডাউন মেনুকে ডান পাশে নেওয়ার জন্য .dropdown-menu ক্লাসের সাথে .dropdown-menu-right ক্লাস ব্যবহার করুন।

---

যদি আপনি ড্রপডাউন মেনুকে নিচের দিকে প্রদর্শনের পরিবর্তে উপরের দিকে প্রদর্শন করতে চান, তাহলে

এলিমেন্টের মধ্যে "dropdown" ক্লাসের পরিবর্তে "dropup" ক্লাস ব্যবহার করুনঃ

kt_satt_skill_example_id=1103

বুটস্ট্রাপ ড্রপডাউন এক্সেসিবিলিটি

যখন ড্রপডাউন মেনু তৈরি করবেন তখন role এবং aria-* এট্রিবিউট ব্যবহার করবেন, এতে স্ক্রিন রিডারদের ব্যবহারে সুবিধা হবেঃ

kt_satt_skill_example_id=1104

একনজরে ড্রপডাউন সংক্রান্ত ক্লাসগুলো দেখে নেইঃ

ক্লাস	বর্ণনা
.dropdown	একটি ড্রপডাউন মেনুকে নির্দেশ করে।
.dropdown-menu	একটি ড্রপডাউন মেনু তৈরী করে।
.dropdown-menu-right	ড্রপডাউন মেনুকে ডানে এ্যালাইন করে।
.dropdown-header	ড্রপডাউন মেনুর মধ্যে একটি হেডার যুক্ত করে।
.dropup	একটি ড্রপআপ মেনুকে নির্দেশ করে।
.disabled	ড্রপডাউন মেনুর একটি আইটেমকে ডিজেবল করে রাখার জন্য ব্যবহার করা হয়।
.divider	ড্রপডাউন মেনুর আইটেমগুলোকে হরিজন্টাল লাইনের মাধ্যমে আলাদা করার জন্য ব্যবহার করা হয়।

Content added || updated By

Abdur Rakib